<template>
	<view class="orderCenterWrapper wrapperLayer wd100bd">
		<view class="topFixedContainer colCen wd100bd">
			<view class="headerNavigationbar rowCenBet wd100bd">
				<view class="leftContent rowCen">
					<view class="search-container rowCenCen wd100bd">
						<u--input
							    placeholder="请输入订单号查询"
							    prefixIcon="search"
							    prefixIconStyle="font-size: 22px;color: #909399"
								border="none"
								 type="text"
								v-model.trim="keyWord"
								@confirm="resetData()"
							></u--input>
						
					</view>
				</view>
			</view>
			<view class="whiteArea colCen wd100bd">
				<scroll-view class="platScroll wd100" scroll-x="true">
					<view class="platNavContainer rowCen wd100bd">
						<block v-for="(item,index) in platList" :key="index">
							<view class="platItem colCenCen" @click="platCurrent = item.type">
								<text style="white-space: nowrap;"
									:class="item.type==platCurrent?'actTxt':''">{{item.name}}</text>
								<view class="actBorder" v-if="item.type==platCurrent"></view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="placeholderBox wd100"></view>
		<view class="listContainer colCen wd100bd pd20">
			<view class="pageTipsContent wd100bd" v-if="showTips">
				<view class="closeIcon">
					<u-icon @click="showTips = false"  name="close-circle" color="#FF3824" size="18"></u-icon>
				</view>
				<view>1. 评价类订单最晚于抢单次日11点前完成评价，超时无法返现。<br>2.订单确认收货后或评价后才会显示佣金!!</view>
			</view>

			<view class="orderListContent wd100bd colCen">
				<block v-for="(item,index) in list" :key="index">
					<view class="orderItem pd20 wd100bd">
						<view class="orderNumbar rowCenBet wd100bd">
							<view class="leftOrder rowCen">
								<text>订单号:{{item.platformOrderNo}}</text>
								<image class="icondiy copyIcon" src="../../static/copy.png" @click.stop="copyOrderNumber(item.platformOrderNo)"></image>
							</view>
							<view class="rightStatus rowCen">
								<text>{{item.stateTxt}}</text>
							</view>
						</view>
						<view class="orderInfobar rowSta wd100bd">
							<image class="itemPic" mode="scaleToFill" width="160rpx" height="160rpx"
								:src="item.goodsImage" :lazy-load="true"></image>
							<view class="goodsInfo wd100bd">
								<view class="goodsTit wd100bd">
									{{item.goodsTitle}}
								</view>
								<view class="rowCen wd100bd tagbars">
									<view class="redtags rowCen">
										<view class="whitefont rowCenCen">
											返
										</view>
										<view class="borderfont rowCen">
											{{item.goodsLabel}}
										</view>
									</view>
									<view class="redtags rowCen" v-if="item.platform == 'meituan'">
										<view class="borderfont rowCen">
											最高返{{item.maxCommission}}
										</view>
									</view>
									<view class="orgtags rowCenCen" style="margin-top: 14rpx;" v-if="item.goodsType == 1">
										需要评价
									</view>

									<view class="greentags rowCenCen"  style="margin-top: 14rpx;" v-if="item.goodsType == 2">
										无需评价
									</view>

									<!-- <view class="greentags rowCenCen">
										无需评价
									</view> -->
								</view>

								<view class="greytxt">
									活动平台：{{item.platformTxt}}
								</view>
								<view class="greytxt">
									报名时间：{{item.createTimeTxt}}
								</view>
								<view class="greytxt" v-if="item.settleTimeTxt">
									入账时间：{{item.settleTimeTxt}}
								</view>

								<view class="rowCen daojishitxt" v-if="item.state==3">
									倒计时：<countDown :countnum="item.overdue_time" @countDown="countDown(item,index)"></countDown>
								</view>

							</view>
						</view>
						<view class="borderArea wd100bd">
						</view>
						<view class="priceContent rowCenBet wd100bd" v-if="item.state != 1 && item.state != 2">
							<!-- <view class="rowCen">
								<view class="whitefont rowCenCen">
									付款金额 ￥{{item.paidAmount}}
								</view>
								<view class="redtags rowCen" style="margin: 0;">
									<view class="borderfont rowCen">
										佣金 {{item.userProfit}}元
									</view>
								</view>
							</view> -->
							<view
								style="display: flex;justify-content:flex-end !important;width: 100%;font-size: 26rpx;color: #FE7C0C;"  v-if="item.state != 3">
								<view>付款金额 <text style="font-weight: bold;">￥{{item.paidAmount ? item.paidAmount : '0.00'}} </text> | 预估佣金 <text
										style="font-weight: bold;">{{item.userProfit}}元</text></view>

							</view>

							<view class="rowCen" v-if="item.state === 3" style="display: flex;justify-content:flex-end !important;width:100%;">
								<view class="bdbtn rowCenCen" @click="gomini(item)">
									去下单
								</view>
								<view class="bdbtn rowCenCen" @click="quxiaodigndan(item)">
									取消报名
								</view>
							</view>
							
							<!-- #ifdef MP-WEIXIN -->
							<view class="rowCen" v-if="item.state === 4 && item.goodsType == 1"
								style="margin-left: 30rpx;">
								<!-- 	<view class="bdbtn rowCenCen" @click="gomini(item)">
									前往下单
								</view> -->
								<view class="rowCenCen orgbtn" @click="goPingJia(item)">
									去评价
								</view>
							</view>
							<!-- #endif -->
						</view>
					</view>
				</block>
				<u-loadmore :status="loadStatus" v-if="list.length > 0" />
			</view>
		</view>

		<view class="emptyArea colCen" v-if="list.length==0 && pageNumber > 0">
			<image class="emptyIcon" src="https://cdn.uviewui.com/uview/empty/data.png" mode=""></image>
			<text>空空如也~</text>
		</view>
		<!-- <image class="oldOrderBox" src="../../static/oldOrder.png" @click="goOldOrer"></image> -->
	</view>
</template>

<script>
	import countDown from '@/components/countDown.vue'
	import * as Api from '@/api/bwc.js'
	import store from '@/store'
	export default {
		components: {
			countDown
		},
		data() {
			return {
				userId:'',
				keyWord: '',
				showTips: true,
				showpup: false,
				platList: [{
						name: '全部订单',
						type: ''
					},
					{
						name: '已报名',
						type: 3
					},
					{
						name: '已下单',
						type: 4
					},
					{
						name: '已取消',
						type: 1
					},
					{
						name: '任务完成',
						type: 8
					}
				],
				platCurrent: '',
				list: [],
				pageNumber: 1,
				loadstatus: 'loading'
			}
		},
		onLoad() {
			this.userId = store.getters.userId;
			if(!this.userId){
				uni.navigateTo({
					url:"/pages/login/index"
				})
				return;
			}
			
		},
		onShow() {
			this.platCurrent = ''
			this.getList()
		},
		watch: {
			platCurrent: {
				handler(nval) {
					this.resetData()
				}
			},
		},
		onPullDownRefresh() {
			this.resetData()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			goOldOrer(){
				uni.navigateTo({
					url:"/pages/order/oldOrder"
				})
			},
			countDown(item,index){
				this.list[index].statusTxt = "已过期";
				this.list[index].status = 1;
				console.log(item)
			},
			resetData() {
				this.pageNumber = 1
				this.list = [];
				this.loadstatus = 'loading'
				this.getList()
			},
			getList() {
				try {
					let param = {
						limit: 10,
						page: this.pageNumber,
						state: this.platCurrent,
						platformOrderNo: this.keyWord
					}
					Api.getUnionOrderList(param).then((res) => {
						if(res.code == 1){
							if (res.data.data.length < 10) {
								this.loadstatus = 'nomore'
							}
							this.pageNumber++
							this.list = this.list.concat(res.data.data)
						}else{
							this.loadStatus = "nomore"
							return this.$toast(res.msg);
						}
					}).catch((e) => {
						return this.$toast('接口请求错误');
					})
				} catch (e) {
					this.list = []
				}
				uni.stopPullDownRefresh()
			},
			gomini(info) {
				// #ifdef MP-WEIXIN
				let appId = "" ;
				let path = "";
				switch(info.platform){
					case "meituan" :
						appId = info.actionUrl.wxMini.mt.appid;
						path = info.actionUrl.wxMini.mt.path;
						break;
					case "ele" :
						appId = info.actionUrl.wxMini.elm.appid;
						path =info.actionUrl.wxMini.elm.path;
						break;	
					default:
						break;
				}
				if(appId != ''){
					uni.openEmbeddedMiniProgram({
						appId: appId,
						path: path,
						allowFullScreen: true,
						success(res) {},
						fail(err) {}
					})
				}
				
				// #endif
				// #ifdef H5
				console.log(info);
					if(info.platform == 'meituan'){
						window.location.href = info.actionUrl.h5.mt
					}else if(info.platform == 'ele'){
						uni.setClipboardData({
							data: info.goodsTitle,
							success: () => {
								uni.showToast({
									title: '店铺名字复制成功，请打开饿了么APP或者小程序搜索店铺下单',
									icon: 'none'
								})
							}
						})
					}
				// #endif
				
				
				
				
				
				// // #ifdef MP-WEIXIN
				// uni.openEmbeddedMiniProgram({
				// 	appId: info.actionUrl.wxAppid,
				// 	path: info.actionUrl.wxPath,
				// 	allowFullScreen: true,
				// 	success(res) {},
				// 	fail(err) {}
				// })
				// // #endif
				// // #ifdef H5
				// window.location.href = info.actionUrl.lpUrl
				// // #endif
			},
			 quxiaodigndan(info) {
				uni.showModal({
					title: '提示',
					content: '确定要取消报名吗?',
					showCancel: true,
					 success: async (res) => {
						if (res.confirm) {
							try {
								Api.cancelUnionSign({orderId: info.id}).then((res) => {
									if(res.code == 1){
										this.$toast('取消成功');
										this.resetData()
									}else{
										return this.$toast(res.msg);
									}
								}).catch((e) => {
									return this.$toast('接口请求错误');
								})
							} catch (e) {
								//TODO handle the exception
							}
						}
					}
				})
			},
			copyOrderNumber(orderNumber) {
				uni.setClipboardData({
					data: orderNumber+"",
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			goPingJia(item){
				if(item.platform == 'meituan'){
					uni.openEmbeddedMiniProgram({
						appId: 'wx2c348cf579062e56',
						path: 'pages/orders/orders',
						allowFullScreen: true,
						success(res) {},
						fail(err) {}
					})
				}else {
					uni.openEmbeddedMiniProgram({
						appId: 'wxece3a9a4c82f58c9',
						path: 'pages/orderlist/pages/index/index',
						allowFullScreen: true,
						success(res) {},
						fail(err) {}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.orderCenterWrapper {
		.placeholderBox {
			height: 200rpx;
		}

		.topFixedContainer {
			position: fixed;
			z-index: 100;
			background: #fff;

			.headerNavigationbar {
				height: 90rpx;
				padding: 0 32rpx;

				.leftContent {
					flex: 1;

					.search-container {
						padding: 0 20rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: #F7F7F7;

						.inputClass {
							width: 100%;
							font-size: 28rpx;
							padding: 0 32rpx;
							font-weight: 400;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}

				.typeSetting-btn {
					margin-left: 10rpx;

					.pltxt {
						padding: 0 10rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
					}

					.activetype {
						color: #FF3824;
					}
				}
			}

			.whiteArea {
				background-color: #fff;

				.plugCategoryBar {
					height: 90rpx;

					.iconArea {
						width: 32rpx;
						height: 32rpx;

						.backIcon {
							width: 18rpx;
							height: 32rpx;
						}
					}

					.plugContent {
						flex: 1;
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
						padding: 150rpx;
					}

					.activePlug {
						color: #FF3824;
					}
				}

				.platScroll {
					white-space: nowrap;
					padding: 0 30rpx;

					.platNavContainer {
						height: 90rpx;

						.platItem {
							padding: 0 37rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							height: 100%;
							white-space: nowrap;
							position: relative;

							.actTxt {
								color: #FF3824;
							}

							.actBorder {
								width: 42rpx;
								height: 6rpx;
								background: #FF3824;
								border-radius: 3rpx;
								position: absolute;
								bottom: 2rpx;
							}
						}
					}
				}
			}
		}

		.listContainer {
			.pageTipsContent {
				background: rgba(255, 56, 36, 0.05);
				border-radius: 20rpx;
				padding: 25rpx 60rpx 25rpx 24rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FF3824;
				line-height: 28rpx;
				position: relative;

				.closeIcon {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}

			.orderListContent {
				margin-top: 20rpx;

				.orderItem {
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					.orderNumbar {
						height: 72rpx;

						.leftOrder {
							font-size: 22rpx;
							font-weight: 500;
							color: #666666;

							.copyIcon {
								width: 28rpx;
								height: 28rpx;
								margin-left: 20rpx;
							}
						}

						.rightStatus {
							font-size: 22rpx;
							font-weight: 500;
							color: #333;
						}

					}

					.orderInfobar {
						.itemPic {
							height: 160rpx;
							width: 160rpx;
							border-radius: 16rpx;
							overflow: hidden;
						}

						.goodsInfo {
							width: 510rpx;
							padding-left: 20rpx;

							.goodsTit {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
								margin-top: 2rpx;
							}

							.tagbars {
								//height: 38rpx;
								//margin-top: 14rpx;
								flex-wrap: wrap;
								.greentags {
									margin-right: 16rpx;
									padding: 0 8rpx;
									height: 38rpx;
									background: #EBFAF1;
									border-radius: 4rpx;
									border: 1rpx solid #25AE5B;
									font-weight: 500;
									font-size: 20rpx;
									color: #26AE5B;
								}
							}

							.greytxt {
								height: 22rpx;
								margin-top: 16rpx;
								font-weight: 500;
								font-size: 22rpx;
								color: #999999;
							}

							.daojishitxt {
								margin-top: 16rpx;
								font-weight: 500;
								font-size: 22rpx;
								color: #faae1d;
							}
						}
					}

					.borderArea {
						height: 1rpx;
						background: #F8F8F8;
						margin-top: 20rpx;
					}

					.priceContent {
						height: 120rpx;

						.bdbtn {
							padding: 0 20rpx;
							height: 56rpx;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
							background: #FFFFFF;
							border-radius: 28rpx;
							border: 2rpx solid #C6C6C6;
							margin-left: 20rpx;
						}
						
						.orgbtn {
							width: 150rpx;
							height: 58rpx;
							background: #FE7C0C;
							border-radius: 29rpx;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;
						}

						.priceItemArea {
							.texttip {
								font-size: 24rpx;
								font-weight: 500;
								color: #666666;
							}

							.valtext {
								font-size: 30rpx;
								font-weight: bold;
								color: #333333;
								margin-top: 16rpx;
							}
						}

						.compareArea {
							padding: 0 14rpx;
							height: 30rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #666666;
							background: #F1F0F0;
							border-radius: 14rpx 14rpx 14rpx 0px;
						}
					}
				}
			}
		}

		.emptyArea {
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;

			.emptyIcon {
				width: 264rpx;
				height: 200rpx;
				margin-top: 200rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.redtags {
		margin-right: 16rpx;
		height: 38rpx;
		border-radius: 4rpx;
		overflow: hidden;
		border: 1rpx solid #FE5A49;
		margin-top: 14rpx;

		.borderfont {
			padding: 0 12rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #FE5A49;
		}
	}

	.whitefont {
		padding: 0 10rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		height: 38rpx;
		background: #FE5342;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}
	
	.orgtags {
		margin-right: 16rpx;
		padding: 0 8rpx;
		height: 38rpx;
		background: #FDFBF8;
		border-radius: 4rpx;
		border: 1rpx solid #FE7C0C;
		font-weight: 500;
		font-size: 20rpx;
		color: #FE7C0C;
	}
	.oldOrderBox{
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
	}
</style>